<template>
    <div class="home-page">
        <div class="search-wrap">
            <div class="search">
                <div class="search-panel">
                    <div class="select" @click="handleSelectPanel">
                        <span>
                            {{ selectItems[selectIndex] }}
                        </span>
                        <span>
                            <svg t="1678241202979" class="icon" viewBox="0 0 1902 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2886" width="16" height="16">
                                <path
                                    d="M155.204535 74.710455C126.615552 46.121472 80.483035 45.902117 51.719826 74.665326L51.719826 74.665326C23.155712 103.22944 23.012571 149.397723 51.378322 177.763474L827.770953 954.156105C884.758821 1011.143973 977.122889 1011.175424 1034.142208 954.156105L1810.534839 177.763474C1838.910318 149.387995 1838.956544 103.428535 1810.193335 74.665326L1810.193335 74.665326C1781.629294 46.101285 1735.477321 45.94176 1706.708626 74.710455L982.721463 798.697618C954.132553 827.286601 907.960393 827.466313 879.191698 798.697618L155.204535 74.710455 155.204535 74.710455Z"
                                    fill="#000000" p-id="2887"></path>
                            </svg>
                        </span>
                    </div>
                    <input class="searchInput" maxlength="63" type="text" placeholder="输入搜索内容" />
                    <div class="se-icon">
                        <svg t="1678241459842" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3906" width="32" height="32">
                            <path
                                d="M955.069071 864.311021 740.015134 649.258107c-3.752464-3.751441-8.841366-5.860475-14.149255-5.860475-5.306866 0-10.395768 2.108011-14.149255 5.860475l-16.692171 16.692171-38.34226-38.34226c53.03796-59.810201 85.298711-138.442072 85.298711-224.478588 0-186.774871-151.952784-338.727655-338.727655-338.727655S64.527642 216.35456 64.527642 403.12943c0 186.775894 151.952784 338.728678 338.727655 338.728678 86.36909 0 165.276231-32.510438 225.170343-85.913718l38.303374 38.303374-17.34504 17.34504c-7.812943 7.813966-7.812943 20.48352 0 28.297486l215.051891 215.052914c3.753487 3.751441 8.841366 5.860475 14.149255 5.860475 5.306866 0 10.395768-2.108011 14.149255-5.860475l62.334697-62.334697C962.883037 884.794541 962.883037 872.124987 955.069071 864.311021zM104.546078 403.12943c0-164.709319 133.9999-298.709219 298.709219-298.709219s298.709219 133.9999 298.709219 298.709219S567.964616 701.839673 403.255297 701.839673 104.546078 567.838749 104.546078 403.12943zM878.585119 912.496463 691.829691 725.741036l34.036187-34.036187 186.755428 186.755428L878.585119 912.496463z"
                                fill="#272636" p-id="3907"></path>
                        </svg>
                    </div>
                </div>
                <Transition>
                    <div class="select-panel" v-if="isShow">
                        <div class="select-items">
                            <span v-for="(item, index) in selectItems" @click="changeSelect(index)">
                                {{ item }}
                            </span>
                        </div>
                    </div>
                </Transition>
            </div>
        </div>

        <div class="desc">找法律 要案例 寻服务 来循轨合规</div>

        <div class="box">
            <ul>
                <li @click="goRegular">
                    <div class="box-content">
                        <h4>法律法规司法库例库</h4>
                        <p>高效定位 全面覆盖</p>
                        <p>专题分类 风险分析</p>
                        <p>一站式搜索</p>
                    </div>
                    <div class="box-bottom"></div>
                </li>
                <li @click="goCriminal">
                    <div class="box-content">
                        <h4>企业刑事合规智库</h4>
                        <p>现实导向</p>
                        <p>创新探索</p>
                        <p>企业视野</p>
                    </div>
                    <div class="box-bottom"></div>
                </li>
                <li @click="goCase">
                    <div class="box-content">
                        <h4>订制服务</h4>
                        <p>智能分析</p>
                        <p>个性化服务</p>
                    </div>
                    <div class="box-bottom"></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const isShow = ref(false)
const selectItems = ['标题', '正文', '案号']
const selectIndex = ref(0)
const router = useRouter()
const changeSelect = (index) => {
    selectIndex.value = index
    handleSelectPanel()
}
const handleSelectPanel = () => {
    isShow.value = !isShow.value
}
const goCase = () => {
    router.push('/case')
}
const goCriminal = () => {
    router.push('/home2')
}


const goRegular = () => {
    router.push('/regular')
}
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.home-page {
    width: 100%;
    height: 900px;
    position: relative;
}

.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 600px;
    margin: 70px auto;
    position: relative;
}

.search-panel {
    width: 600px;
    border: 1px solid black;
    display: flex;
    height: 50px;
    align-items: center;
    border-radius: 50px;
    background: rgba(232, 231, 230, 0.6);
    box-shadow:
        0 0 8px 0 rgba(232, 237, 250, 0.6),
        0 2px 4px 0 rgba(232, 237, 250, 0.5);
}

.searchInput {
    outline: none;
    border: none;
    height: 90%;
    width: 420px;
    /* background: rgba(232, 231, 230, 0.6); */
    opacity: 1;
    background: none;
}

.select {
    font-family: 'myFont';
    font-size: 16px;
    height: 100%;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    width: 108px;
    justify-content: space-around;
}

.se-icon {
    width: 72px;
    height: 100%;
    border-radius: 0 50px 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se-icon:hover {
    background-color: rgba(210, 226, 248, 1);
    cursor: pointer;
}

.select-panel {
    width: 600px;
    height: 60px;
    border: 1px solid black;
    position: absolute;
    top: 55px;
    left: 0px;
    border-radius: 60px;
    background-color: rgba(232, 231, 230, 0.6);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.select-items {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.select-items span {
    margin: 0 10px;
    font-family: myFont;
}

.select-items span:hover {
    color: rgba(42, 130, 228, 1);
    cursor: pointer;
}

.desc {
    text-align: center;
    font-size: 27px;
    font-weight: bolder;
    letter-spacing: 0px;
    font-family: 'myFont';
    margin: 50px 0;
    text-shadow:
        1px 1px #bae6ef,
        2px 2px #bae6ef,
        3px 3px #bae6ef,
        4px 4px #bae6ef,
        5px 5px #bae6ef;
}

.box {
    display: flex;
    margin: 0 auto;
    margin-top: 80px;
    width: 1100px;
}

/* .box a {
    text-decoration: none;
    display: inline-block;
} */

.box li {
    display: inline-block;
    width: 300px;
    /* height: 304px; */
    background-color: #a6caf3;
    margin-right: 100px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    transition: all 0.5s;
    /* 过渡所有属性 */
}

.box li:hover {
    transform: scale(1.1);
    /* 放大到150% */
}

.box li:last-child {
    margin-right: 0;
}

.box-content {
    width: 300px;
    height: 300px;
}

.box h4 {
    color: #000;
    font-weight: bold;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.box p {
    color: #fff;
    font-size: 18px;
    line-height: 35px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 2px rgb(32, 150, 233);
    font-weight: 600;
}

.box-bottom {
    width: 300px;
    height: 56px;
    background-color: #d0dff1;
}
</style>
